<template>
    <div>
        <AddCustomerDialog :options="options"
                           :visible="addCustomerVisible"
                           :on-close="closeCustomerDialog"
                           :callback="addCustomer"
        />
        <EditCustomerDialog :options="options"
                            ref="EditCustomerDialog"
                            :visible="editCustomerVisible"
                            :on-close="closeEditCustomer"
                            :callback="editCustomer"
        />
        <ViewCustomerDialog :options="options" :visible="viewCustomerVisible"
                            ref="ViewCustomerDialog"
                            :on-close="closeViewCustomer">
        </ViewCustomerDialog>
        <el-card class="table-card">

            <div slot="header">
                <span style="font-weight: bold">Results</span>
                <el-button class="p-button" type="primary" icon="el-icon-circle-plus-outline" size="mini"
                           v-if="newButtonVisible" style="float: right; " @click="openCustomerDialog">New
                </el-button>
                <el-button class="p-button" type="primary" icon="el-icon-download" size="mini"
                           v-if="exportButtonVisible" style="float: right;margin-right: 20px "
                           @click="openCustomerDialog">Export
                </el-button>
            </div>
            <div style="overflow-y: scroll">

                <el-table
                    height="440"
                    fixed
                    v-loading="this.$store.getters.isLoading"
                    :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                    :data="customerTable"
                    ref="customerTable"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection"
                        width="42">
                    </el-table-column>
                    <el-table-column
                        prop="customerId"
                        label="Customer ID"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="customerName"
                        label="Customer Name"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="productType"
                        label="Product Type"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="enterpriseProperty"
                        label="Enterprise Property"
                        show-overflow-tooltip
                        width="140">
                    </el-table-column>
                    <el-table-column
                        prop="customerMgrDept"
                        label="Customer MgrDept"
                        show-overflow-tooltip
                        width="140">
                    </el-table-column>
                    <el-table-column
                        prop="customerMgrName"
                        label="Customer MgrName"
                        width="145">
                    </el-table-column>
                    <el-table-column
                        prop="customerStatus"
                        label="Customer Status"
                        width="80">
                        <template slot-scope="scope">
                            <el-tag
                                :type="scope.row.customerStatus === '20' ? 'danger' : 'success'"
                                disable-transitions>{{ scope.row.customerStatus === '20' ? 'Freeze' : 'Normal' }}
                            </el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column
                        label="Operations"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="small"
                                icon="el-icon-edit"
                                type="success"
                                circle
                                v-if="editButtonVisible"
                                @click="handleEditCustomer(scope.$index, scope.row)"
                            >
                            </el-button>
                            <el-button
                                size="small"
                                icon="el-icon-search"
                                type="primary"

                                @click="handleViewCustomer(scope.$index, scope.row)" circle>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import AddCustomerDialog from "@/views/NPMS/Customer/CustomerManage/Dialog/AddCustomerDialog";
import EditCustomerDialog from "@/views/NPMS/Customer/CustomerManage/Dialog/EditCustomerDialog";
import QS from "qs";
import ViewCustomerDialog from "@/views/NPMS/Customer/CustomerManage/Dialog/ViewCustomerDialog";


export default {
    name: "CustomerData",
    props:['options','loadCustomer'],
    components: {ViewCustomerDialog, EditCustomerDialog, AddCustomerDialog},
    data() {
        return {
            //dialog - visible
            addCustomerVisible: false,
            editCustomerVisible: false,
            viewCustomerVisible: false,

            //table-data
            customerTable: [],

            multipleSelection: [],

            tempCustomerId: "",
            exportButtonVisible: false,
            newButtonVisible: false,
            editButtonVisible: false,
            currentUser: {},
        }
    },
    mounted() {

        var user = this.$store.getters.getUser;
        this.currentUser = user;
        console.log(user)
        var role = user.roles[0]
        var deptID = user.userDeptId

        //根据当前登录用户Role来判断是否
        if (role === this.$npms.roles.CUSTOMER_MGR) {
            //客户经理
            this.loadCustomer();
            this.exportButtonVisible = false
            this.newButtonVisible = true
            this.editButtonVisible = true
        } else if (role === this.$npms.roles.BUSSINESS_MGR) {
            //事业部经理
            this.loadCustomer();
            this.exportButtonVisible = false
            this.newButtonVisible = false
            this.editButtonVisible = false
        } else if (role === this.$npms.roles.MARKET_MGR) {
            //营销总监
            this.exportButtonVisible = false
            this.newButtonVisible = true
            this.editButtonVisible = true
        } else if (role === this.$npms.roles.MARKET_SP) {
            //营销专员
            this.exportButtonVisible = true
            this.newButtonVisible = false
            this.editButtonVisible = true
        } else if (role === this.$npms.roles.MARKET_SUB_MGR) {
            //营销副总
            this.exportButtonVisible = true
            this.newButtonVisible = false
            this.editButtonVisible = false
        } else if (role === this.$npms.roles.ADMIN) {
            this.exportButtonVisible = true
            this.newButtonVisible = true
            this.editButtonVisible = true
        }

    },
    methods: {
        // //从后端获取数据
        // loadCustomer() {
        //     this.$axios.post(
        //         '/customer/customer/queryAllCustomer'
        //     ).then(res => {
        //         var a = res.data.obj
        //         console.log(a)
        //
        //         this.customerTable = res.data.obj
        //     });
        // },
        pushCustomer(customer) {
            console.log('push customer', customer)
            console.log(QS.stringify(customer))
            this.$axios.post(
                '/customer/customer/addCustomer',
                customer.customer
            ).then(res => {
                customer.customerContacts.customerId = res.data.obj.customerId
                for (var i = 0; i < customer.customerRelationship.length;i++) {
                    customer.customerRelationship[i].relativeCustomerId1 = res.data.obj.customerId
                }

                this.pushCustomerContacts(customer.customerContacts)
                this.pushCustomerRelationship(customer.customerRelationship)
                this.loadCustomer()

            });
        },
        pushCustomerContacts(customerContacts) {
            this.$axios.post(
                '/customer/customer/addContacts',
                customerContacts
            ).then(res => {
                console.log(res)
            });
        },
        pushCustomerRelationship(customerRelationship) {
            console.log('1111', customerRelationship)
            console.log(QS.stringify(customerRelationship));

            this.$axios.post(
                '/customer/customer/addCustomerRelationship',
                customerRelationship
            ).then(res => {
                console.log(res)
            });
        },
        updateCustomer(customer) {
            console.log('update customer', customer)
            console.log(QS.stringify(customer))
            this.$axios.post(
                '/customer/customer/updateCustomer',
                customer
            ).then(res => {
                this.loadCustomer()
                console.log(res)
                this.$message.success("Edit customer successful!");

            });
        },
        queryCustomer(queryCondition) {
            this.$axios.post(
                "/customer/customer/query", queryCondition
            ).then(res => {
                this.customerTable = res.data.obj
            });
        },
        //dialog-method
        openCustomerDialog() {
            this.addCustomerVisible = true;
        },
        closeCustomerDialog() {
            this.addCustomerVisible = false
        },
        openEditCustomer() {
            this.editCustomerVisible = true
        },
        closeEditCustomer() {
            this.editCustomerVisible = false
        },
        openViewCustomer() {
            this.viewCustomerVisible = true
        },
        closeViewCustomer() {
            this.viewCustomerVisible = false
        },


        //click-event
        addCustomer(customer) {
            this.pushCustomer(customer)
        },
        editCustomer(customer) {
            this.updateCustomer(customer.customer)
            console.log(customer)
        },

        handleEditCustomer(index, row) {
            //判断权限
            var dd = JSON.parse(JSON.stringify(row))
            if (this.currentUser.roles[0] === this.$npms.roles.MARKET_SP || this.currentUser.username === dd.customerMgrName || this.currentUser.roles[0] === this.$npms.roles.ADMIN) {
                //除营销专员外，不是客户所属人，给出提示无法修改
                dd.customerCity = JSON.parse(dd.customerCity)
                this.$refs.EditCustomerDialog.setDataa(dd)
                this.$refs.EditCustomerDialog.loadCustomerContacts(row)
                this.$refs.EditCustomerDialog.loadCustomerRelationship(row)
                this.openEditCustomer();
                console.log(index, row);
            } else {
                this.$message.error("You have no authority to edit the customer!")
            }


        },
        handleViewCustomer(index, row) {
            var dd = JSON.parse(JSON.stringify(row))
            console.log('sssss11111',dd)

                //除营销专员外，不是客户所属人，给出提示无法修改
                dd.customerCity = JSON.parse(dd.customerCity)
                this.$refs.ViewCustomerDialog.setDataa(dd)
                this.$refs.ViewCustomerDialog.loadCustomerContacts(row)
                this.$refs.ViewCustomerDialog.loadCustomerRelationship(row)
                this.openViewCustomer();
                console.log(index, row);

        },


        //other
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

    }
}
</script>

<style scoped>
.table-card {
    width: 100%;
    margin-top: 20px;
    border-radius: 15px;
    height: 530px;
}
</style>